<template>
<div class="common-body-wrapper">
  <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" :isNeedTree="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
  <div class="common-table-tree-wrapper">
    <!-- <table-tree :isNeedTree="isNeedTree" :paramName="paramName" @toggleTreeBox="toggleTreeBox" @setSelectedNode="setSelectedNode" @searchFn="getList">
            </table-tree> -->
    <div class="common-table-wrapper">
      <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
        <!--按钮-->
        <div class="operate-btn-group" slot="operateBtnGroup">
          <a class="ake_btn ake_btn_text" v-if="isPermmited('PARKVIP:VIPWATER:EXPORT')" @click.prevent="AddModal_open()">新增</a>
        </div>

        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
              <span v-else-if="'showAccessPrivilege' == props.prop" class="row-href cursor" @click="showAccessPrivilege(scope.row)">查看权限</span>
              <span v-else-if="'settlementAmount' == props.prop">{{scope.row.settlementAmount|formatSettlementAmount(scope.row.settlementType)}}</span>
              <span v-else-if="'carportNum' == props.prop">
                <span v-if="scope.row.isDynamicMode">{{scope.row.carportNum}}</span>
                <span v-else>无限制</span>
              </span>
              <span v-else-if="'isChargeGroupRelated' == props.prop">
                <span>{{scope.row.isChargeGroupRelated|isChargeGroupRelatedShow}}</span>
              </span>
              <span v-else-if="'isDatePrivilege' == props.prop">
                <span class="row-href cursor" v-if="scope.row.isDatePrivilege" @click="showPrivilegeDate(scope.row)">查看日期</span>
              </span>
              <span v-else :title="scope.row[props.prop]">{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>
        <template slot="operateCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" min-width="180">
            <template slot-scope="scope">
              <!-- v-if="isPermmited('PLATFORM:PARKCOUPON:MANAGE:SAVE')" -->
              <el-button v-if="scope.row.vipSeq!=null" disabled title="VEMS创建的VIP类型不可修改" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_text" icon="el-icon-edit"></el-button>
              <el-button v-else-if="scope.row.hasVip" disabled title="已有该类型的月票不可修改" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_text" icon="el-icon-edit"></el-button>
              <el-button v-else size="small" type="primary" class="ake_btn ake_font_btn ake_btn_text" icon="el-icon-edit" @click="modelEdit(scope.row)"></el-button>

              <el-button v-if="scope.row.vipSeq!=null" disabled title="VEMS创建的VIP类型不可删除" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_red" icon="el-icon-delete"></el-button>
              <el-button v-else-if="scope.row.hasVip" disabled title="已有该类型的月票不可删除" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_red" icon="el-icon-delete"></el-button>
              <el-button v-else size="small" type="primary" class="ake_btn ake_font_btn ake_btn_red" icon="el-icon-delete" @click.prevent="delVipType(scope.row)"></el-button>

              <el-button size="small" type="primary" class="ake_btn_text" @click="modelEdit(scope.row,true)">详情</el-button>

            </template>
          </el-table-column>
        </template>
      </multi-fun-table>

      <!---->
      <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    </div>
  </div>
  <!-- 新增弹框 -->
  <basic-modal ref="AddModal" width="690" customeClass="sync-detail-modal" static="true">
    <h3 slot="title">{{editModelTitle}}</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="form_Add" :model="vipTypeEditModel" :rules="vipTypeRules" label-width="180px">
        <div class="rowItem">
          <el-form-item label="VIP名称" prop="customVipName">
            <el-input :disabled="editModelReadonly" v-model="vipTypeEditModel.customVipName"></el-input>
          </el-form-item>
        </div>
        <div class="rowItem">
          <el-form-item label="VIP类型组" prop="vipGroupType">
            <el-select :disabled="editModelReadonly" v-model="vipTypeEditModel.vipGroupType">
              <el-option label="普通VIP" :value="0"></el-option>
              <el-option label="访客VIP" :value="1"></el-option>
              <el-option label="黑名单VIP" :value="2"></el-option>
              <el-option label="预定VIP" :value="3"></el-option>
              <el-option label="共享VIP" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="rowItem">
          <el-form-item label="通行权限" prop="parkId">
            <el-button v-if="!editModelReadonly" size="small" type="primary" @click="toSelectPark" class="select-park-btn ake_btn_text">选择停车场</el-button>
            {{vipTypeEditModel.parkName}}
          </el-form-item>
        </div>
        <div class="rowItem" v-if="vipTypeEditModel.parkId">
          <el-form-item label=" " prop="channelSeqList">
            <div class="parkTree">
              <!-- 通行权限树 -->
              <div class="common-tree modal-tree-box">
                <ul id="channelTree" name="channelTree" class="ztree"></ul>
              </div>
            </div>
          </el-form-item>
        </div>
        <div class="rowItem" style="align-items: flex-start;">
          <el-form-item label="结算类型">
            <el-select :disabled="editModelReadonly" v-model="vipTypeEditModel.settlementType" prop="settlementType" placeholder="请选择结算类型">
              <el-option label="时间结算" :value="0"></el-option>
              <el-option label="余额结算" :value="1"></el-option>
              <el-option label="次数结算" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="rowItem">
          <el-form-item prop="settlementAmount" label="结算金额(元/月)" v-if="vipTypeEditModel.settlementType=='0'">
            <el-input :disabled="editModelReadonly" v-model="vipTypeEditModel.settlementAmount"></el-input>
          </el-form-item>
          <el-form-item prop="settlementAmount" label="充值比例" v-if="vipTypeEditModel.settlementType=='1'">
            <el-input :disabled="editModelReadonly" v-model="vipTypeEditModel.settlementAmount"></el-input>
            <span>充值比例1.2 表示充值100元余额120元</span>
          </el-form-item>
          <el-form-item prop="settlementAmount" label="充值比例(元/次)" v-if="vipTypeEditModel.settlementType=='2'">
            <el-input :disabled="editModelReadonly" v-model="vipTypeEditModel.settlementAmount"></el-input>
          </el-form-item>
        </div>
        <div class="rowItem">
          <el-form-item prop="dynamicCarportNumber" label="可用车位数">
            <el-input :disabled="editModelReadonly" v-model="vipTypeEditModel.dynamicCarportNumber"></el-input>
          </el-form-item>
        </div>
        <div class="rowItem">
          <el-form-item label=" ">
            <div class="checkBoxGroups">
              <label>
                <input :disabled="editModelReadonly" v-model="vipTypeEditModel.isDynamicMode" v-bind:true-value="1" v-bind:false-value="0" type="checkbox">
                <span>开启多位多车</span>
              </label>
              <label>
                <input :disabled="editModelReadonly" v-model="vipTypeEditModel.dynamicFullLimit" v-bind:true-value="1" v-bind:false-value="0" type="checkbox">
                <span>内场多位多车满位到剩余，同一VIP票车辆外场已在场车辆无法进入内场 <i class="el-icon-warning" @mouseover.prevent.stop="isShowTips=true" @mouseleave.prevent.stop="isShowTips=false"></i></span>
                <div class="tips" v-if="isShowTips">
                  <h4>适用于多车场区域</h4>
                  <p>外场A区域，内场B区域，一组车辆在B区域是多位多车，B区域车位从满到余时，同组车A区域在场车辆不能进入B区域。防止车主将长时间停放于A区域的车辆开入B区域而逃避停车费</p>
                </div>
              </label>
            </div>
          </el-form-item>
        </div>
        <div class="rowItem">
          <el-form-item label=" ">
            <label>
              <input :disabled="editModelReadonly" type="checkbox" v-model="vipTypeEditModel.openVipFullLimit" v-bind:true-value="1" v-bind:false-value="0">
              <span>满位控制</span>
            </label>
          </el-form-item>
          <div class="rowRight" v-if="vipTypeEditModel.openVipFullLimit==1">
            <el-form-item prop="vipFullLimitValue" label="最多可进">
              <el-input :disabled="editModelReadonly" v-model="vipTypeEditModel.vipFullLimitValue"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="rowItem">
          <el-form-item label=" ">
            <label>
              <input :disabled="editModelReadonly" type="checkbox" v-model="vipTypeEditModel.isDatePrivilege" v-bind:true-value="1" v-bind:false-value="0">
              <span>区分日期</span>
            </label>
          </el-form-item>
          <div class="rowRight" v-if="vipTypeEditModel.isDatePrivilege==1">
            <el-form-item prop="priDateArrStr" label="区分日期">
              <a :disabled="editModelReadonly" href="javascript:;" @click="openCalendar()" class="ake_btn ake_btn_text">设置日期表</a>
            </el-form-item>
          </div>
        </div>
        <div class="rowItem">
          <el-form-item label=" ">
            <label>
              <input :disabled="editModelReadonly" type="checkbox" v-model="vipTypeEditModel.isTimePrivilege" v-bind:true-value="1" v-bind:false-value="0">
              <span>区分时段</span>
            </label>
          </el-form-item>
          <div class="rowRight" v-if="vipTypeEditModel.isTimePrivilege==1">
            <!-- <el-form-item prop="priTimeArr" label="区分时段"> -->
            <el-form-item prop="" label="区分时段">
              <!-- <el-time-picker
                                        :is-range="true"
                                        :default-value="vipTypeEditModel.priTimeArr"
                                        :editable="editModelReadonly"
                                        format="HH:mm"
                                        placeholder="请选择有效时间段">
                                    </el-time-picker>                            -->
              <el-time-picker is-range v-model="priTimeArrValue" format="HH:mm" :editable="false" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </div>
        </div>
        <div class="rowItem">
          <el-form-item label="是否设置计费组">
            <el-select :disabled="editModelReadonly" v-model="vipTypeEditModel.isChargeGroupRelated" placeholder="请选择活动区域">
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="rowItem" v-if="vipTypeEditModel.isChargeGroupRelated==1">
          <el-form-item prop="chargeGroupCode" label="计费组编号">
            <el-input :disabled="editModelReadonly" v-model="vipTypeEditModel.chargeGroupCode"></el-input>
          </el-form-item>
        </div>
        <div class="rowItem">
          <el-form-item prop="vipNearExpiredDayThreshold" label="到期提醒时长(天)">
            <el-input :disabled="editModelReadonly" v-model="vipTypeEditModel.vipNearExpiredDayThreshold"></el-input>
          </el-form-item>
        </div>
        <div class="rowItem">
          <el-form-item label="VIP重合覆盖时长(小时)">
            <el-input :disabled="editModelReadonly" v-model="vipTypeEditModel.vipRecoverTime" placeholder="为空则不会覆盖"></el-input>
          </el-form-item>
        </div>
        <!-- <hr style="height:1px;border:none;border-top:1px dashed #ccc;" />   
                            <div class="rowItem" v-if="isMoreRules" @click="isMoreRules=!isMoreRules">
                                <a class="moreRules">更多设置</a>
                            </div> 
                            <div class="tableBox" v-else>
                                <template v-for="(singleItem,index) in tableItemData">
                                    <div class="tableItem" :key="index">
                                        <a class="tableTitle">{{singleItem.title}}</a>
                                        <label class="headInputName" v-if="singleItem.headInputName">
                                            <span>{{singleItem.headInputName}}</span>
                                            <input class="primaryInput" type="text" v-model="tableData[index]['headInputValue']">
                                        </label>  
                                        <table border="1" cellspacing="0" cellpadding="8" bordercolor="#ccc">
                                        <tr v-for="(rowData,indexRow) in singleItem.rowData" :key="indexRow">
                                            <td v-if="rowData.td1span" :rowspan="rowData.td1span">{{rowData.td1text}}</td>
                                            <td v-if="rowData.td2span" :rowspan="rowData.td2span">{{rowData.td2text}}</td>
                                            <td>
                                                <div class="lastTd">
                                                    <span class="tdselect">
                                                    <el-form-item :label="rowData.selectName">
                                                            <el-select v-model="tableData[index]['tdArr'][indexRow]['selectValue']" placeholder="请选择活动区域">
                                                                <el-option label="区域一" value="shanghai"></el-option>
                                                                <el-option label="区域二" value="beijing"></el-option>
                                                                <el-option label="自定义" value="自定义"></el-option>
                                                            </el-select>
                                                    </el-form-item>
                                                    </span>
                                                    <span class="tdInput" v-if="tableData[index]['tdArr'][indexRow]['selectValue']=='自定义'">
                                                        <input class="primaryInput" type="text" v-model="tableData[index]['tdArr'][indexRow]['mineText']" placeholder="自定义提示">
                                                    </span>   
                                                </div>
                                            </td>
                                        </tr>
                                        </table>
                                    </div>
                                </template>
                            </div>-->
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button v-if="!editModelReadonly" class="ake_btn ake_btn_text ake_btn_confirm" @click="submitForm('form_Add')">确定</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('AddModal')">关闭</button>
    </div>
  </basic-modal>
  <!--选择停车场树-->
  <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
    <h3 slot="title">选择停车场</h3>
    <div class="modal-body" slot="modal-body">
      <div class="common-tree modal-tree-box">
        <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
      </div>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button type="button" class="ake_btn ake_btn_text ake_btn_confirm" @click="selectParkSure()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal',2)">取消</button>
    </div>
  </basic-modal>

  <!--选择停车场树-->
  <basic-modal ref="privilegeTreeModal" width="400" customeClass="select-park-modal" static="true">
    <h3 slot="title">通行权限</h3>
    <div class="modal-body" slot="modal-body">
      <div class="common-tree modal-tree-box">
        <ul id="accessPrivilegeTree" name="accessPrivilegeTree" class="ztree"></ul>
      </div>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text modal-close" @click="closed('privilegeTreeModal')">关闭</button>
      <!-- <button type="button" class="ake_btn ake_btn_text" @click="selectParkSure()">确认</button> -->
    </div>
  </basic-modal>

  <!--查看日期-->
  <basic-modal ref="privilegeDateModal" width="400" customeClass="privilegeDate-modal" static="true">
    <h3 slot="title">适用日期</h3>
    <div class="modal-body" slot="modal-body">
      <multi-fun-table hasCheckboxCol="false" tableBoxId="privilegeDateTable" isNeedPrint="false" isSetTable="false" sortColumn='' orderType='' fixed-cols="0" :theads-info="privilegeDate.theadsInfo" :tbodys-info="privilegeDate.bodysInfo">
        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
              <span v-else-if="'date' == props.prop">{{scope.row|formatDate}}</span>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text modal-close" @click="closed('privilegeDateModal')">关闭</button>
    </div>
  </basic-modal>

  <basic-modal ref="multiCalendarModal" customeClass="multi-calendar-modal" static="true" width="100%">
    <a slot="modal-icon-close" class="close" @click="closed('multiCalendarModal', 2)">&times;</a>
    <h3 slot="title">选择日期</h3>
    <div class="modal-body" slot="modal-body">
      <!-- selectedDate: 当前已经选中的日期数组 -->
      <!-- min: 当前可选的最小日期 -->
      <!-- max: 当前可选的最大日期 -->
      <!-- save 点击保存时会调用的方法，回传参数为当前选择的日期数组 -->
      <calendar :selectedDate="vipTypeEditModel.priDateArrStr" @save="saveCalendar"></calendar>
    </div>
    <div class="modal-footer" slot="modal-footer">
    </div>
  </basic-modal>
</div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";
import Calendar from "@components/calendar/Calendar";
//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import js from "./js/vip_type.js";

export default {
  mixins: [common, stardardList, invokeModal, js],
  components: {
    Calendar
  },
  data() {
    var today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(
        moment()
        .add(1, "days")
        .format("YYYY-MM-DD 00:00:00")
      )
    ];
    return {
      total: 0,
      fixedCols: 4,
      paramName: "parkId",
      isMoreRules: true,
      isShowTips: false,
      priTimeArrValue: [],
      tableData: [{
          headInputValue: "",
          tdArr: [{
              selectValue: 1,
              mineText: "chome"
            },
            {
              selectValue: 1,
              mineText: ""
            },
            {
              selectValue: 1,
              mineText: ""
            },
            {
              selectValue: 1,
              mineText: ""
            },
            {
              selectValue: 1,
              mineText: ""
            },
            {
              selectValue: 1,
              mineText: ""
            },
            {
              selectValue: 1,
              mineText: ""
            },
            {
              selectValue: 1,
              mineText: ""
            }
          ]
        },
        {
          headInputValue: "",
          tdArr: [{
              selectValue: 14,
              mineText: ""
            },
            {
              selectValue: 14,
              mineText: ""
            },
            {
              selectValue: 14,
              mineText: ""
            },
            {
              selectValue: 14,
              mineText: ""
            },
            {
              selectValue: 14,
              mineText: ""
            },
            {
              selectValue: 14,
              mineText: ""
            },
            {
              selectValue: 14,
              mineText: ""
            },
            {
              selectValue: 14,
              mineText: ""
            }
          ]
        },
        {
          headInputValue: "",
          tdArr: [{
              selectValue: 21,
              mineText: ""
            },
            {
              selectValue: 21,
              mineText: ""
            },
            {
              selectValue: 21,
              mineText: ""
            },
            {
              selectValue: 21,
              mineText: ""
            },
            {
              selectValue: 21,
              mineText: ""
            },
            {
              selectValue: 21,
              mineText: ""
            },
            {
              selectValue: 21,
              mineText: ""
            },
            {
              selectValue: 21,
              mineText: ""
            }
          ]
        },
        {
          headInputValue: "copyyyyy",
          tdArr: [{
              selectValue: 22,
              mineText: ""
            },
            {
              selectValue: 22,
              mineText: ""
            },
            {
              selectValue: 22,
              mineText: ""
            },
            {
              selectValue: 22,
              mineText: ""
            },
            {
              selectValue: 22,
              mineText: ""
            },
            {
              selectValue: 22,
              mineText: ""
            },
            {
              selectValue: 91,
              mineText: ""
            },
            {
              selectValue: 91,
              mineText: ""
            }
          ]
        }
      ],
      tableItemData: [{
          title: "有效期内，提醒期之前",
          headInputName: "",
          rowData: [{
              td1text: "ok_0.0",
              td1span: "4",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "4",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            }
          ]
        },
        {
          title: "有效期内，提醒期内",
          headInputName: "",
          rowData: [{
              td1text: "ok_0.0",
              td1span: "4",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "4",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            }
          ]
        },
        {
          title: "有效期外，延时期内",
          headInputName: "超期删除时长(天):",
          rowData: [{
              td1text: "ok_0.0",
              td1span: "4",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "4",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            }
          ]
        },
        {
          title: "有效期外，删除期内",
          headInputName: "超期删除时长(天):",
          rowData: [{
              td1text: "ok_0.0",
              td1span: "4",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "4",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "2",
              selectName: "显示语音",
              selectOptions: []
            },
            {
              td1text: "ok_0.0",
              td1span: "",
              td2text: "ok_0.1",
              td2span: "",
              selectName: "播报语音",
              selectOptions: []
            }
          ]
        }
      ],
      searchList: [{
          index: 1,
          isShow: false,
          type: "text",
          name: "vipName",
          text: "VIP名称",
          value: ""
        },
        {
          index: 1,
          isShow: false,
          type: "select",
          name: "vipGroup",
          text: "VIP类型",
          value: "",
          options: [{
              name: "--全部--",
              value: ""
            },
            {
              name: "普通类型",
              value: "0"
            },
            {
              name: "访客类型",
              value: "1"
            },
            {
              name: "黑名单类型",
              value: "2"
            },
            {
              name: "共享类型",
              value: "4"
            }
          ]
        },
        // {
        //   index: 3,
        //   isShow: false,
        //   initShow: sessionStorage.getItem("isShowOperator") == "false" ? false : true,
        //   type: "text",
        //   name: "operatorName",
        //   text: "运营商名称",
        //   value: ""
        // }        
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "vipName",
          text: "VIP名称",
          minWidth: 200
        },
        {
          index: 2,
          isShow: false,
          prop: "vipGroupStr",
          text: "VIP类型",
          minWidth: 130
        },
        {
          index: 3,
          isShow: false,
          prop: "parkName",
          text: "适用停车场",
          minWidth: 200
        },
        {
          index: 4,
          isShow: false,
          prop: "showAccessPrivilege",
          text: "通行权限",
          minWidth: 100
        },
        {
          index: 5,
          isShow: false,
          prop: "settlementAmount",
          text: "结算说明",
          minWidth: 150
        },
        {
          index: 6,
          isShow: false,
          prop: "carportNum",
          text: "可用车位数",
          minWidth: 170
        },
        {
          index: 7,
          isShow: false,
          prop: "isDatePrivilege",
          text: "适用日期",
          minWidth: 100
        },
        {
          index: 8,
          isShow: false,
          prop: "timePeriod",
          text: "适用时段",
          minWidth: 140
        },
        {
          index: 9,
          isShow: false,
          prop: "isChargeGroupRelated",
          text: "是否关联计费组",
          minWidth: 140
        },
        {
          index: 10,
          isShow: false,
          prop: "modifyBy",
          text: "最近操作员",
          minWidth: 120
        },
        {
          index: 11,
          isShow: false,
          prop: "modifyTime",
          text: "最近操作时间",
          minWidth: 180
        }
      ],
      tbodysInfo: []
    };
  }
};
</script>

<style lang="less">
.initInput(@width) {
  height: 30px;
  width: @width;
  padding: 4px;
  border: 1px #ccc solid;
  border-radius: 2.9px;

  &:first-child {
    margin-left: 20px;
  }

  &:focus {
    outline-color: #2cc6bb; //  outline:
  }
}

.privilegeDate-modal {
  padding-bottom: 30px;

  .modal-body {
    max-height: 400px;
    min-height: 300px;
    overflow-y: scroll;
  }

  #privilegeDateTable {
    height: 300px;
  }
}

.rowItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .rowRight {
    width: 320px;
  }

  .checkBoxGroups {
    display: flex;

    label:first-child {
      width: 250px;
    }

    label {
      position: relative;

      .tips {
        position: absolute;
        z-index: 3;
        top: 60px;
        padding: 15px;
        background-color: #fff;
        border: 1px #ccc solid;
        line-height: 23px;

        p {
          text-align: justify;
        }
      }
    }
  }

  .el-form-item {
    margin: 0;
  }

  .parkTree {
    width: 350px;
    height: 300px;
    border: 1px solid #ccc;
    overflow: auto;
  }

  .primaryInput {
    .initInput(65px);
  }

  .moreRules {
    margin: 0 auto;
    color: #23527c;
    padding: 10px 0;
    font-size: 16px;
    cursor: pointer;
  }

  .settlePriceItem>label {
    width: 100px !important;
  }

  .settlePriceItem>.el-form-item__content {
    margin-left: 100px !important;
  }
}

.multi-calendar-modal {
  .modal-container {
    .modal-body {
      padding: 0px;
      max-height: -webkit-fill-available;
    }
  }
}

.tableBox {
  .tableTitle {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 20px 0 10px 0;
    font-size: 16px;
    color: #337ab7;
  }

  .primaryInput {
    .initInput(200px);
  }

  .headInputName {
    display: inline-block;
    margin-bottom: 10px;
  }

  table {
    border-spacing: 0;
    border-collapse: collapse;
    background-color: transparent;
    width: 100%;

    .lastTd {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .el-form-item {
        margin: 0 10px 0 0;
      }
    }
  }
}
</style>
